<template>
  <el-header style="height: 160px">
    <el-row>
      <el-col :span="8">
        <h2>
          <img
            src="../assets/logo.png"
            alt=""
            style="width: 180px; padding-left: 50px"
          />
        </h2>
      </el-col>
      <el-col :span="11">
        <HeaderSearch />
      </el-col>
      <el-col :span="5" style="margin-top: 25px">
        <span v-if="user == null">
          <router-link to="/login">登录 || </router-link>
          <router-link to="/regist">注册 </router-link>

          <!-- <router-link to="/admin">管理员</router-link>

            <router-link to="/detailPage">新闻详情页</router-link> -->
        </span>
        <span v-else>
          <router-link to="/personal">个人中心</router-link>
          <img
            :src="this.user[0].avatar_img"
            alt=""
            style="width: 60px; border-radius: 50%;height:60px;"
          />
          <span
            style="
              font-size: 17px;
              position: relative;
              bottom: 25px;
              left: 20px;
            "
            >用户名：{{ this.user[0].uname }}</span
          >
          <button  size="mini" @click="handleLogout" style="margin-left: 20px;"
            >退出登录</button>
          
        </span>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <HeaderMenu />
      </el-col>
    </el-row>
  </el-header>
</template>

<script>
import HeaderSearch from "./HeaderSearch.vue";
import HeaderMenu from "./HeaderMenu.vue";
import { mapState, mapMutations } from "vuex";

export default {
  components: {
    HeaderSearch,
    HeaderMenu,
  },
  computed: {
    ...mapState("user", ["user"]),
  },
  methods: {
    ...mapMutations("user", ["deleteUser"]),
    // add() {
    //   console.log(this.user[0].avatar_img);
    // },
    handleLogout() {  
      // 直接调用 mutation 来删除用户状态  
      this.deleteUser();  
  
      // 然后进行路由跳转  
      this.$router.push('/login'); // 假设你的登录页面路由是 'login'  
    }  
  },

  created() {
    // this.add();
  },
};
</script>

<style scoped>
</style>